<template>
  <div>
    <!-- 面包屑 -->
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表单 -->
    <el-card>
      <el-descriptions class="margin-top" size="medium" title="商家详情" :column="2" border>
        <template slot="extra">
          <el-button type="primary" size="medium" @click="$router.back()">返回</el-button>
        </template>
        <el-descriptions-item label="订单编号">{{ indentDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="服务编号">{{ indentDetail.sid }}</el-descriptions-item>
        <el-descriptions-item label="核销码">{{ indentDetail.sid }}</el-descriptions-item>
        <el-descriptions-item label="商家名称">{{ indentDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="买家">{{ indentDetail.username }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{ indentDetail.state | stateFilter }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ indentDetail.pladate }}</el-descriptions-item>
        <el-descriptions-item label="预约时间">{{ indentDetail.predate }}</el-descriptions-item>
        <el-descriptions-item label="原价">{{ indentDetail.originalprice }}</el-descriptions-item>
        <el-descriptions-item label="原价">{{ indentDetail.originalprice - indentDetail.presentprice }}</el-descriptions-item>
        <el-descriptions-item label="现价">{{ indentDetail.presentprice }}</el-descriptions-item>
        <el-descriptions-item label="服务内容">{{ indentDetail.serviceitem }}</el-descriptions-item>

      </el-descriptions>

    </el-card>
  </div>
</template>

<script>
export default {
  name: "IndentDetail",
  data() {
    return {
      indentDetail: {},
    }
  },
  mounted () {
    this.getIndentDetail();
  },
  methods: {
    async getIndentDetail(){
      let id = this.$route.query.id;
      let res = await this.$API.Indent.reqIndentDetail(id);
      if(res.code == 200){
        this.indentDetail = res.data.list[0];
      }
    },
  },
  filters: {
    stateFilter(value) {
      if (value == 1) return "待支付";
      else if (value == 2) return "已支付";
      else if (value == 3) return "待核销";
      else if (value == 4) return "已完成";
      else return "已取消";
    }
  },

}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<style scoped>
.around {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-weight: bold;
}
</style>